<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-30 21:04:27
-->
<template>
  <div class="home">
    <div class="header">
      <div class="wrapper">
        <div class="logo">行学天下</div>
        <div class="title">行学天下</div>
        <div class="phone">联系我们</div>
      </div>
    </div>
    <div class="bg_pic">
      <img src="/images/bg_1.jpg" alt="">
    </div>
    <div class="projects">
      <div class="wrapper">
        <div class="title">精选游学项目</div>
        <div class="project" v-for="i in 5" :key="i">
          <div class="project_pic">
            <img src="/images/p1.jpg" alt="">
          </div>
          <div class="project_info">
            <div class="project_name">新西兰海外游学多好玩，光是奥克兰就值得停留一周！</div>
            <div>2021-03-12 2021-03-20</div>
          </div>
        </div>
      </div>
    </div>
    <div class="articles">文章</div>
    <div class="questions">常见问题</div>
    <div class="footer">底部</div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  .title {
    font-size: 20px;
    line-height: 2em;
    font-weight: bold;
  }
  // 居中容器
  .wrapper {
    width: 90%;
    margin: 0 auto;
  }
  // 头部
  .header {
    padding: 5px 0;
    .wrapper::after {
      clear: both;
      content: "";
      display: block;
    }
    .logo ,.title , .phone{
      height: 60px;
      line-height: 60px;
    }
    .logo {
      width: 60px;
      border-radius: 50%;
      background-color: #4fbc8d;
      color: #fff;
      text-align: center;
      float: left;
    }
    .title {
      float: left;
      padding:0 1em;
    }
    .phone {
      float: right;
    }
  }
  // 大图
  .bg_pic {
    img {
      width: 100%;
    }
  }
  // 游学项目
  .projects{
    .project {
      & > div {
        height: 200px;
      }
      .project_pic {
        width: 300px;
        float: left;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .project_info {
        margin-left: 320px;
        .project_name {
          line-height: 1.6em;
          font-weight: bolder;
        }
      }
    }
  }
}

</style>
  <div>首页</div>
</template>